import { useState, useRef, useEffect } from 'react';
import Editor from '@monaco-editor/react';
import useComponentStore from '../../../store';
import { message } from 'antd';
import { produce } from 'immer';

// 新增类型定义
type CodeEntity = {
  name: string;
  type: 'function' | 'object';
  code: string;
};

function JSEditor() {
  // 状态管理 ---------------------------------------------------------------
  // 初始化时拼接存储的代码
  const { setPageJs, pageJs,setBindEvents,currentElement } = useComponentStore();

  // 初始化时拼接存储的代码

  const [code, setCode] = useState(`// 输入你的 JavaScript 代码`);

  useEffect(() => {
    const initialCode = pageJs.length > 0
      ? pageJs.map(entity => entity.code).join('\n\n')
      : `// 输入你的 JavaScript 代码`;
    setCode(initialCode);
    
  }, [pageJs]);

  // 新增解析函数 -----------------------------------------------------------
  const parseCodeEntities = () => {
    const entityList: CodeEntity[] = [];
    const functionNames = new Set<string>(); // 用于记录已解析的函数名
    const duplicateFunctionNames: string[] = []; // 用于记录重复的函数名

    // 匹配函数的正则表达式
    const functionRegex = /(function\s+([a-zA-Z_][\w]*)\s*\(.*?\)\s*\{[\s\S]*?\})|(const|let|var)\s+([a-zA-Z_][\w]*)\s*=\s*(async\s*)?(\(.*?\)\s*=>\s*\{[\s\S]*?\})|(const|let|var)\s+([a-zA-Z_][\w]*)\s*=\s*function\s*\(.*?\)\s*\{[\s\S]*?\}/g;

    // 匹配对象的正则表达式
    const objectRegex = /(const|let|var)\s+([a-zA-Z_][\w]*)\s*=\s*\{[\s\S]*?\}/g;

    // 解析函数
    let match;
    while ((match = functionRegex.exec(code)) !== null) {
      let name: string | undefined;
      if (match[2]) {
        name = match[2];
      } else if (match[4]) {
        name = match[4];
      } else if (match[8]) {
        name = match[8];
      } else if (match[10]) {
        name = match[10];
      }

      if (name) {
        // 检查函数名是否已存在
        if (functionNames.has(name)) {
          if (!duplicateFunctionNames.includes(name)) {
            duplicateFunctionNames.push(name);
          }
        } else {
          functionNames.add(name);
        }

        entityList.push({
          name,
          type: 'function',
          code: match[0]
        });
      }
    }

    // 解析对象
    while ((match = objectRegex.exec(code)) !== null) {
      entityList.push({
        name: match[2],
        type: 'object',
        code: match[0]
      });
    }


    // 如果存在重复函数名，不调用 setPageJs
    if (duplicateFunctionNames.length > 0) {
      message.error(`发现重复的函数名：${duplicateFunctionNames.join(', ')}，请修改后重试`);
      return;
    }

    setPageJs(entityList); // 保存解析后的代码实体

    const newBindEvents = produce(currentElement?.bindEvents || [], (draft) => {
      entityList.forEach(item => {
        const targetIndex = draft.findIndex(e => e.name === item.name)
        if (targetIndex > -1) {
          // 正确修改draft对象
          draft[targetIndex].code = item.code
        }
      })
    })
    currentElement?.id && setBindEvents(currentElement?.id,newBindEvents)
    message.success('保存成功');
  };

  // 渲染部分修改 -----------------------------------------------------------
  return (
    <div className="w-full h-screen flex flex-col">
      {/* 新增保存按钮 */}
      <div className="p-2">
        <button
          onClick={parseCodeEntities}
          className="bg-black float-right text-white px-8 py-2 rounded-3xl hover:bg-gray-700 transition-colors"
        >
          保存
        </button>
      </div>

      {/* 如果有重复函数名，显示警告信息 */}
      {/* {duplicateFunctions.length > 0 && (
        <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4">
          <strong className="font-bold">错误:</strong>
          <span className="block">发现重复的函数名：{duplicateFunctions.join(', ')}，请修改后重试</span>
        </div>
      )} */}

      {/* 编辑器区域 */}
      <div className="flex-1 mt-4">
        <Editor
          height="70vh"
          defaultLanguage="javascript"
          theme="light"
          value={code}
          onChange={(value) => setCode(value || '')}
          options={{
            minimap: { enabled: false },
            fontSize: 14,
            lineNumbers: 'on',
            automaticLayout: true,
          }}
        />
      </div>
    </div>
  );
}

export default JSEditor;